<template>
  <div class="body_bgi full p_10 relative">
    <div class="w_full h_50 relative">
      <bigscreen-header :headerName="contestName + '活动羊排名'" />
    </div>

    <div class="w_95_p h_full-70 m_0_auto">
      <div class="w_full flex_row_start fs_1_5vw color_fff pb_10">
        <div class="fw_bold w_80 text_center">排名</div>
        <!-- <div class="fw_bold w_100 text_center ml_40">图片</div> -->
        <div class="fw_bold w_100 text_center ml_10">羊编号</div>
        <div class="fw_bold w_200 text_center">养殖户</div>
        <div class="fw_bold w_200 text_center">电话</div>
        <div class="fw_bold w_150 text_center">得分</div>
        <div class="fw_bold text_center">地区</div>
      </div>

      <div class="w_full h_full-60 overflow_y_auto scroll_box_1">
        <div 
          class="w_full h_80 lh_80 cursor mb_10" 
          v-for="(item, index) in sheepSortList" :key="index"
        >
          <div class="full flex_row_start fs_1_5vw pr_10">
            <div class="w_80 h_80 color_fff font_zh text_center">{{ item.rank }}</div>

            <div class="w_full-80 h_80 flex_row_start bgc_fff border_radius_10 ml_10 relative">
              <!-- <div class="w_100 h_80 pl_10">
                <img class="w_70 h_70 lh_80 border_radius_10 mt_5" v-if="item.avatar" :src="formatAnimalImg(item.avatar)" alt="">
                <img class="w_70 h_70 lh_80 border_radius_10 mt_5" v-else src="../assets/image/sheep.png" alt="">
              </div> -->
              <div class="w_100 text_center fw_bold">{{ item.sheepNumber }}</div>
              <div class="w_200 text_center fw_bold">{{ item.yzhName }}</div>
              <div class="w_200 text_center font_zh">{{ item.phone }}</div>
              <div class="w_150 text_center font_zh">{{ item.totalScore }}</div>
              <div class="text_center fw_bold" v-if="item.adress">
                {{ item.adress }}
              </div>
              <div class="text_right font_zh absolute right_20 top_center main_text_shaddow">
                {{ formatMingCi(index) }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <bigscreen-footer />
  </div>
</template>

<script>
  import { getSheepRankList } from '@/api/index.js'
  import BigscreenHeader from '@/components/Header.vue'
  import BigscreenFooter from '@/components/Footer.vue'

  export default {
    name: 'PersonSort',
    components: { BigscreenHeader, BigscreenFooter },
    data() {
      return {
        contestId: null,
        contestName: null,
        sheepSortList: [
          // { id: '1001', children:[{ name: '姓名', personNumber: '1001', totalScore: 12, townName: '通辽市', villageName: '腰林毛肚', avatar: '' } ]},
          // { id: '1001', children:[{ name: '姓名', personNumber: '1001', totalScore: 12, townName: '通辽市', villageName: '腰林毛肚', avatar: '' } ]},
          // { id: '1001', children:[{ name: '姓名', personNumber: '1001', totalScore: 12, townName: '通辽市', villageName: '腰林毛肚', avatar: '' } ]},
        ],
      }
    },
    async mounted() {
      let contestId = this.$route.params.contestId
      let contestName = this.$route.params.contestName
      this.contestId = contestId
      this.contestName = contestName

      // 获取 羊 全部排名
      this.getSheepRankList(contestId)
    },
    methods: { 
      // 获取 选手 排名
      async getSheepRankList(contestId) {
        let res = await getSheepRankList(contestId)
        try {
          if (res.code == 1000) {
            this.sheepSortList = res.data
          }
        } catch(err) {
          console.log('获取羊排名失败 : ', err);
        }
      },

      // 格式化 图片,
      formatAnimalImg(str) {
        let list = str.split(',')

        return list[0]
      },

      formatAnimalGender() {

      },

      formatLevel() {

      },
      
      formatMingCi(index) {
        let result = ''
        if (index == 0) {
          result = '特等奖'
        } else if (index == 1 || index == 2) {
          result = '一等奖'
        } else if (index == 3 || index == 4 || index == 5 || index == 6) {
          result = '二等奖'
        } else if (index == 7 || index == 8 || index == 9 || index == 10  || index == 11 || index == 12) {
          result = '三等奖'
        } else {
          result = ''
        }
        return result
      },

      // 格式化 排名 icon
      formatJugdeIcon(val) {
        let icon = ''

        if (val == 1) {
          icon = 'first_icon'
        } else if (val == 2) {
          icon = 'sec_icon'
        } else if (val == 3) {
          icon = 'third_icon'
        } else {
          icon = ''
        }

        return icon
      }, 

      goToPage(path) {
        this.$router.push(path)
      }
    }
  }
</script>

<style>
  .el-carousel--horizontal { height: 100% !important; }
  .el-carousel__container { height: 100% !important; }

  .is-active { color: #409eff; }
  .el-tabs__item { color: #fff; font-size: 20px !important; }
</style>